{extend name="layout/layout" /}

{block name="pagecss"}
<style>
    .cover-image img {
        width: 100px;
        height: 100px;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    .cover-image img.del {
        width: 24px;
        height: 24px;
        margin-top: -97px;
        margin-left: -16px;
        cursor: pointer;
        border: 0;
    }

    .uploader-div {
        border: solid 1px #ccc;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .uploader-div .icon {
        font-size: 40px;
        color: #999999;
    }
</style>
{/block}

{block name="content"}
<div class="row">
    <div class="col-md-12">
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-share font-dark"></i>
                    <span class="caption-subject font-dark bold uppercase"> 添加</span>
                </div>
                <div class="actions">
                    <a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;" data-original-title="" title=""> </a>
                </div>
            </div>
            <div class="portlet-body">
                <form class="form-horizontal" method="post">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-9">
                                <div class="form-group">
                                    <label class="control-label col-md-3">
                                        {if condition="($type == 1)"}
                                            病害名称
                                        {else /}
                                            虫害名称
                                        {/if}
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="名称，最多40字" id="name" maxlength="40" data-required="1" name="name" value="" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="form-group">
                                    <label class="control-label col-md-3">
                                        发生农作物
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-md-9">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <select class="form-control" name="croptypeId">
                                                    {foreach name="croptypeList" item="croptype" key="croptypeKey"}
                                                    <option value="{$croptype.id}">{$croptype.name}</option>
                                                    {/foreach}
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn default select-crops" style="margin-bottom: 10px;">选择农作物</button>
                                            </div>
                                        </div>

                                        <div class="list-group crops-group">
                                            <input type="hidden" class="cropIds" name="crops" value="" >
                                            <div class="row group-div">
                                                <div class="col-md-12">
                                                    <div class="bootstrap-tagsinput">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="form-group">
                                    <label class="control-label col-md-3">
                                        适用药剂
                                        <span class="required">*</span>
                                    </label>
                                    <div class="col-md-9">
                                        <button type="button" class="btn default select-medicaments" style="margin-bottom: 10px;">选择药剂</button>

                                        <div class="list-group medicaments-group">
                                            <input type="hidden" class="medicamentIds" name="medicaments" value="" >
                                            <div class="row group-div">
                                                <div class="col-md-12">
                                                    <div class="bootstrap-tagsinput">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="form-group">
                                    <label class="control-label col-md-3">
                                        图片
                                    </label>
                                    <div class="col-md-9">
                                        <div id="upload-image" class="cover-imag">
                                            <span id="upload-btn" data-multi="true" data-ajax="true" data-field="imgUrl" data-total="9" >
                                                <img src="__STATIC__/admin/img/default.png" alt="图片上传" style="width: 100px;height: 100px;" />
                                            </span>
                                        </div>
                                        <span class="help-block">(最多上传9张)</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="type" value="{$type}">
                        <hr />
                        <div class="row">
                            <div class="form-actions">
                                <div class="col-md-offset-2 col-md-10">
                                    <button type="button" class="btn blue save-btn">
                                        保存 <i class="fa fa-floppy-o"></i>
                                    </button>
                                    <button type="button" class="btn default" onclick="history.go(-1);">
                                        返回 <i class="fa fa-mail-forward"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 农作物 模态框 -->
<div class="modal fade" id="crops-modal" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:800px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">农作物</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light" style="margin-bottom: 0;">
                            <div class="box-header">
                                <div class="row">
                                    <div class="col-md-10">
                                        <form action="" class="form searchForm" method="post">
                                            <div class="form-inline">
                                                <input type="text" class="form-control" name="name" value="" placeholder="农作物名称">
                                                &nbsp;&nbsp;&nbsp;
                                                <button type="button" class="btn btn-success doSearch" title="搜索">
                                                    <i class="fa fa-search"></i> 搜索
                                                </button>
                                                <button type="reset" class="btn btn-danger" title="清空">
                                                    <i class="fa fa-trash"></i> 清空
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <form action="" class="form-horizontal datatable-form" name="ajaxForm">
                                    <div class="">
                                        <table id="crops-datatable" class="table table-bordered table-hover dataTable">
                                            <thead>
                                            <th>农作物图片</th>
                                            <th>农作物名称</th>
                                            <th>操作</th>
                                            </thead>
                                        </table>
                                    </div>

                                    <button type="button" class="btn btn-circle btn-primary sellectall-btn" data-value="1"> 全选 </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn blue sureAdd-btn saveCrops-btn"> 确定 </button>
                <button type="button" class="btn default" data-dismiss="modal"> 关闭 </button>
            </div>
        </div>
    </div>
</div>

<!-- 药剂 模态框 -->
<div class="modal fade" id="medicaments-modal" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:800px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">药剂</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light" style="margin-bottom: 0;">
                            <div class="box-header">
                                <div class="row">
                                    <div class="col-md-10">
                                        <form action="" class="form searchForm" method="post">
                                            <div class="form-inline">
                                                <input type="text" class="form-control" name="name" value="" placeholder="药剂名称">
                                                &nbsp;&nbsp;&nbsp;
                                                <button type="button" class="btn btn-success doSearch" title="搜索">
                                                    <i class="fa fa-search"></i> 搜索
                                                </button>
                                                <button type="reset" class="btn btn-danger" title="清空">
                                                    <i class="fa fa-trash"></i> 清空
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <form action="" class="form-horizontal datatable-form" name="ajaxForm">
                                    <div class="">
                                        <table id="medicaments-datatable" class="table table-bordered table-hover dataTable">
                                            <thead>
                                            <th>药剂名称</th>
                                            <th>操作</th>
                                            </thead>
                                        </table>
                                    </div>

                                    <button type="button" class="btn btn-circle btn-primary sellectall-btn" data-value="1"> 全选 </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn blue sureAdd-btn saveMedicaments-btn"> 确定 </button>
                <button type="button" class="btn default" data-dismiss="modal"> 关闭 </button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="token_url" value="{:url('admin/Image/token')}">
<input type="hidden" class="record_url" value="{:url('admin/Image/record')}">
<input type="hidden" class="delimage_url" value="{:url('admin/Image/delete')}">

<input type="hidden" class="save_url" value="{:url('admin/'.strtolower($model).'/addpost')}">

<input type="hidden" class="cropsData_url" value="{:url('admin/'.strtolower($model).'/cropslist')}">
<input type="hidden" class="medicamentsData_url" value="{:url('admin/'.strtolower($model).'/medicamentslist')}">
{/block}

{block name="pagescript"}
<script type="text/javascript">
    var total = 9;
    var imgcount = 0;
</script>
<script src="__STATIC__/admin/js/qiniu/plupload.full.min.js" type="text/javascript"></script>
<script src="__STATIC__/admin/js/qiniu/qiniu.js" type="text/javascript"></script>
<script src="__STATIC__/admin/js/qiniu/qiniuConfig.js" type="text/javascript"></script>
<script src="__STATIC__/admin/pages/js/uploadfile.js" type="text/javascript"></script>
<script src="__STATIC__/admin/pages/js/harm.js" type="text/javascript"></script>
{/block}